<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-09 14:47:58
-->
<template>
    <div class="personalized" v-if="personalized.length !== 0">
        <!-- 标题部分 -->
        <div class="title" @click="gotoSongList">
            <span class="text">推荐歌单</span>
            <el-icon size="20">
                <ArrowRight />
            </el-icon>
        </div>

        <!-- 主体歌单部分 -->
        <div class="main">
            <div class="main-ul">
                <div class="main-item" v-for="(item, index) in personalized" :key="item.id">
                    <SongList :item="item"></SongList>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import SongList from "@/components/content/songlist/SongList.vue";



defineProps({
    personalized: {
        type: Array,
        default: []
    }
})
const router = useRouter()



//方法区
//跳转到歌单区
function gotoSongList() {
    router.push({
        path: '/findmusic/songlist'
    })
}




</script>

<style lang="scss" scoped>
.personalized {
    margin-top: 20px;

    .title {
        cursor: pointer;
        width: 180px;
        display: flex;
        align-items: center;

        .text {
            font-size: 20px;
            font-weight: 700;
            margin-right: 5px;
        }
    }

    .main {
        .main-ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .main-item {
                cursor: pointer;
                margin-top: 10px;
                height: 240px;
                width: 180px;
                margin-bottom: 5px;
                position: relative;

               

            }
        }
    }
}
</style> 